<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>

  </head>
  <style>
    #app {
      width: 600px;
      margin: 10px auto;
    }
    .tb {
      border-collapse: collapse;
      width: 100%;
    }
    .tb th {
      background-color: #0094ff;
      color: white;
    }

    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }

    .add {
      padding: 5px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
  </style>
  <body>
    <div id="app">
      <div class="add">
        编号:<input type="text" v-model="code" /><br />
        品牌名称:<input type="text" v-model="goodsName" /><br />
        产品图片地址：<input type="text" v-model="imgUrl" /><br />
        价格：<input type="text" v-model="price" /><br />
        <!-- <input type="button" value="添加" @click="add" /> -->
        <button @click="add">点击增加</button>
      </div>

      <!-- <div class="add">
        品牌名称:<input type="text" placeholder="请输入搜索条件" />
      </div> -->

      <div>
        <table class="tb">
          <tr>
            <th> 全选：<input type="checkbox" @change="allCheckC" :checked="allCheck"/></th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item,i) in goods">
            <td>
                <input type="checkbox" v-model="checks" :value="item">
            </td>
            <td><img :src="item.imgUrl" style="width: 100px;" alt=""></td>
            <td>{{item.code}}</td>
            <td>{{item.goodsName}}</td>
            <td>{{item.price}}</td>
            <td><button :disabled="item.inventory==1" @click="abc(item)">-</button> &nbsp; {{item.inventory}} &nbsp; <button @click="abcd(item)">+</button></td>
            <td>
                <button @click="del(i)">删除</button>
            </td>  
          </tr>
          <tr v-show="!goods.length">
            <td colspan="7" >没有品牌数据</td>
          </tr>
          <tr>
            <td colspan="7" ><h1>总价：{{total}}</h1></td>
          </tr>
        </table>

      </div>
    </div>
  </body>
</html>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
        allCheck:false,
        code:"",
        goodsName:"",
        price:"",
        imgUrl:"",
        checks:[],
        goods: [
        {
          id: 1,
          goodsName: "雷神的刀",
          imgUrl: "https://img2.baidu.com/it/u=2517426141,1566894058&fm=253&fmt=auto&app=138&f=JPEG?w=533&h=500",
          price: "20",
          inventory: 11,
          code: 1,
        },
        {
          id: 2,
          goodsName: "钟离的柱子",
          imgUrl: "http://t13.baidu.com/it/u=3869001097,4035594863&fm=224&app=112&f=JPEG?w=500&h=500",
          price: "20",
          inventory: 11,
          code: 1,
        },
        {
          id: 3,
          goodsName: "巴巴托斯的风琴",
          imgUrl: "https://img0.baidu.com/it/u=3652285134,414382405&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=394",
          price: "20",
          inventory: 11,
          code: 1,
        },
      ],
       
    },
    computed:{
      total(){
        return (this.checks.reduce(function(total,item){
          return total += item.price*item.inventory
        },0)).toFixed(2)
      }
    },

    watch:{
      checks(newVal){
        if(newVal.length===this.goods.length){
          this.allCheck = true;
        }else{
          this.allCheck = false;

        }
      }
    },
    methods:{
      allCheckC(e){
        console.log(e.target.checked)
        let checked = e.target.checked;
        if(checked){
          this.checks = this.goods
        }else{
          this.checks = [];
        }
      },
        add(){
            if(!this.code || !this.price || !this.goodsName){
                return
            }
           let obj = {
            id:Math.random().toString(32).substring(2),
            goodsName:this.goodsName,
            code:this.code,
            price:this.price,
            imgUrl:this.imgUrl?this.imgUrl:"https://img1.baidu.com/it/u=2196615004,4217831918&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=419",
            inventory:1,
           }
           this.goods.push(obj)
        },
        del(i){
            // console.log(i)
            this.goods.splice(i,1)
        },
        abc(item){
            item.inventory--
        },
        abcd(item){
            item.inventory++
        }
    },
  });
</script>
